import React, { memo, Fragment, useEffect, useState, useCallback } from 'react'
import { Checkbox } from 'antd'
import PropTypes from "prop-types";
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { setRoleMenu } from '../../views/user/store'

const CheckboxGroup = Checkbox.Group;
interface Props {
    roleData?: {
        label: string;
        value: string;
        child_item: {
            label: string;
            value: string;
        }[];
    }
}

const HYCheckBoxAll = function (props: Props) {
    // props-stat 
    const label = props?.roleData?.label
    // usestate 
    const [plainOptions, setPlainOptins] = useState([])
    const [d_checked_list, setd_checked_list] = useState([])
    const [checkedList, setCheckedList] = useState([])
    const [indeterminate, setIndeterminate] = useState(false)
    const [checkAll, setCheckAll] = useState(false)
    // redux 
    const role_menu = useSelector((state: any) => (state.getIn(['user', 'role_menu'])), shallowEqual)
    const dispatch = useDispatch()
    //生命周期 
    useEffect(() => {
        const child_item = props.roleData?.child_item as any
        const d_checked_list = child_item && child_item.length > 0 && child_item.map((item: any) => item.value)
        setPlainOptins(child_item)
        setd_checked_list(d_checked_list)
        //  
        setCheckedList([])
        setIndeterminate(false)
        setCheckAll(false)
    }, [props.roleData])


    const onChange = useCallback(
        (list: any) => {
            setCheckedList(list)
            setIndeterminate(!!list.length && list.length < plainOptions.length,)
            setCheckAll(list.length === plainOptions.length)
            //  setMenuRedux()
        },
        [setCheckedList, setIndeterminate, setCheckAll, plainOptions],
    )
    const onCheckAllChange = useCallback(
        (e: { target: { checked: any; }; }) => {
            const list = e.target.checked ? d_checked_list : [] as any
            setCheckedList(list)
            setIndeterminate(false)
            setCheckAll(e.target.checked)
            // setMenuRedux()//异步 我们需要在这玩意之后执行 所以放在下面调用
        },
        [d_checked_list, setCheckedList, setIndeterminate, setCheckAll],
    )
    const setMenuRedux = useCallback(
        () => {
            const data = {} as any
            const roleData = props.roleData as any
            // 添加
            let roleMenu = role_menu
            if (!roleMenu[roleData.value]) { roleMenu[roleData.value] = {} }
            const checkedLists = checkedList
            // 第二层属性和值
            checkedLists.length > 0 && checkedLists.forEach((item: any) => {
                data[item] = roleData.child_item.filter((i: any) => i.value === item)[0]
            })
            roleMenu[roleData.value] = data
            // 删除
            if (!checkAll && !indeterminate) {
                if (roleMenu[roleData.value]) { delete roleMenu[roleData.value] }
            }
            dispatch(setRoleMenu(roleMenu))
        },
        [checkAll, checkedList, dispatch, indeterminate, props.roleData, role_menu]
    )
    useEffect(() => {
        setMenuRedux()
    }, [checkedList, setMenuRedux]);
    return (
        <Fragment>
            <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
                {label}
            </Checkbox>
            <br /> <br />
            <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
            <br /><br />
        </Fragment>
    )
}

// 接受参数 
HYCheckBoxAll.propType = {
    roleData: PropTypes.object
}

export default memo(HYCheckBoxAll)